<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点名</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/home.css">
</head>

<body>

  <div class="header">
    <div class="header-in container">大冤种提取器</div>
    <div class="countdown container"></div>
  </div>
  <div class="control">
    <div class="control-in container">
      <button class="btn-start" type="button">开始</button>
      <button class="btn-end" type="button">结束</button>
    </div>
  </div>

  <div class="stu m-t10">
    <div class="stu-in container">
      <div class="group">
        <h3>
          第1组
          <a class="addStu" href="javascript:void(0)">添加成员</a>
          <a class="delGroup" href="javascript:void(0)">删除本组</a>
        </h3>
        <ul>
          <li class="stu-item">
            黄嘉辉
            <div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">杨韵璋<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">廖宏妃<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">张长春<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
        </ul>
      </div>
      <div class="group">
        <h3>第2组
          <a class="addStu" href="javascript:void(0)">添加成员</a>
          <a class="delGroup" href="javascript:void(0)">删除本组</a>
        </h3>
        <ul>
          <li class="stu-item">林萃<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">周志超<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">刘长生<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">崔梦娇<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
        </ul>
      </div>
      <div class="group">
        <h3>第3组
          <a class="addStu" href="javascript:void(0)">添加成员</a>
          <a class="delGroup" href="javascript:void(0)">删除本组</a>
        </h3>
        <ul>
          <li class="stu-item">郭嘉辉<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">刘佳富<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">郭浩<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">周波<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">林学君<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
        </ul>
      </div>
      <div class="group">
        <h3>第4组
          <a class="addStu" href="javascript:void(0)">添加成员</a>
          <a class="delGroup" href="javascript:void(0)">删除本组</a>
        </h3>
        <ul>
          <li class="stu-item">朱永康<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">张健飞<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">王依萍<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">范声强<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
        </ul>
      </div>
      <div class="group">
        <h3>第5组
          <a class="addStu" href="javascript:void(0)">添加成员</a>
          <a class="delGroup" href="javascript:void(0)">删除本组</a>
        </h3>
        <ul>
          <li class="stu-item">刘家锦<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">苏陈凤<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">文江宜<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
          <li class="stu-item">刘国梁<div class="close-btn"><span class="iconfont icon-close"></span></div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <script>


    (() => {
      // 获取所有的学生标签li
      const stus = document.querySelectorAll('li')
      // 获取秒数显示的dom
      const countDownDom = document.querySelector('.countdown')
      // 获取开始按钮的dom
      const startBtn = document.querySelector('.btn-start')
      // 获取结束按钮的dom
      const endBtn = document.querySelector('.btn-end')
      // 定义settimeout唯一值
      let setTimeOutId = null
      // 定义setIntervalt唯一值
      let setIntervalId = null
      const initSNum = 10
      // 定义显示倒计时的秒数
      let sNum = initSNum
      countDownDom.innerText = sNum


      //时间倒计时
      const countDown = () => {
        setIntervalId = setInterval(() => {
          console.log(sNum);
          // 把倒计时的秒数显示到页面上
          countDownDom.innerText = sNum
          sNum--
          // 判断是否小于等于0 清除定时任务
          if (sNum <= 0) {
            initClear()
          }

        }, 1000);
      }


      // 清除定时任务 并初始化
      function initClear () {
        clearInterval(setIntervalId)
        clearTimeout(setTimeOutId)

        // 初始化
        setTimeOutId = null
        // 定义setIntervalt唯一值
        setIntervalId = null
        // 定义显示倒计时的秒数
        sNum = initSNum
        countDownDom.innerText = sNum

      }



      // 清除 所有学生的 active 类名效果
      function clearStuActiveAll () {
        stus.forEach(stu => {
          stu.classList.remove('active')
        });
      }

      // 随记抽取学生添加选中效果
      const setRandomStuAddActive = () => {

        clearStuActiveAll()
        // 随记获取一名学生对应的索引值
        let rand = Math.floor(Math.random() * stus.length)  // 0.234  ~ 20.234234 => 向下取整  0~20
        stus[rand].classList.add('active')

        setTimeOutId = setTimeout(setRandomStuAddActive, 100);
      }

      // document.addEventListener('事件',执行函数)
      // 给开始按钮加上 点击事件
      startBtn.addEventListener('click', () => {
        countDown()
        setRandomStuAddActive()
      })
      // 给结束按钮加上 点击事件
      endBtn.addEventListener('click', () => {
        initClear()
      })



    })();

    (() => {

      // 获取添加成员按钮组对象
      const addStuEl = document.querySelectorAll('.addStu')
      // console.log(addStuEl);
      // 获取删除成员按钮组对象
      const closeBtnEl = document.querySelectorAll('.close-btn')
      // console.log(closeBtnEl);
      // 获取删除组按钮组对象
      const delGroupEl = document.querySelectorAll('.delGroup')
      // console.log(delGroupEl);


      // 向当前组添加组员
      function addStuHander (e, index) {
        console.log(`点击了第 ${index + 1} 个元素`);
        console.log('当前点击的元素对象是', e.target);
        let stuName = prompt('请输入学生姓名')

        // 要求:添加dom元素 使用 createElement 和 appendChild 来完成
        // 友情提示：有可能用到以下语法
        // const snode =  e.target.closest('类名').querySelector('选择器')
        // children: 属性，返回一个类数组对象，包含父元素的所有子元素。
        // 新加dom需要从新添加事件监听

      }

      // 删除成员（已完善，可以参考）
      function delStuHander (e, index) {
        // console.log(`点击了第 ${index + 1} 个元素`);
        // console.log('当前点击的元素对象是', e.target);

        // 匹配选择器的最近的祖先元素
        const snode = e.target.closest('.stu-item');
        // 这段代码首先检查 snode 是否存在，如果存在，就调用它的 remove() 方法来移除它。
        if (snode) {
          snode.remove(); // 使用 remove() 方法移除元素
        }
      }

      // 删除组
      function delGroupHander (e, index) {
        console.log(`点击了第 ${index + 1} 个元素`);
        console.log('当前点击的元素对象是', e.target);
        // 友情提示：和删除成员语法类似
      }


      // 为每个元素添加点击监听器
      addStuEl.forEach((item, index) => {
        item.addEventListener('click', function (e) {
          console.log('添加成员');
          // 这里可以添加你想要的点击事件处理逻辑
          addStuHander(e, index)

        });
      });

      // 为每个元素添加点击监听器
      closeBtnEl.forEach((item, index) => {
        item.addEventListener('click', function (e) {
          console.log('删除成员');
          // 这里可以添加你想要的点击事件处理逻辑
          delStuHander(e, index)

        });
      });

      // 为每个元素添加点击监听器
      delGroupEl.forEach((item, index) => {
        item.addEventListener('click', function (e) {
          console.log('删除组');
          // 这里可以添加你想要的点击事件处理逻辑
          delGroupHander(e, index)

        });
      });



    })();


  </script>
</body>

</html>